<template>
	<view>
		<image :src="url1"  mode="aspectFill"></image>
		<view class="box" :class= "isActive ? 'active':''" >v-bind指令</view>
		<view class="box1" 
		style="width: 200px ;height: 200px ;background-color: red;">123</view>
		
		<view class="box2"
		:style="{width: '200px',height: '200px',backgroundColor:'green',fontSize: size +'px'}">123</view>
		<!-- <image src="../../static/booking1.png" mode="aspectFill"></image> -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
let isShow = true
let isActive = ref(false)
let size1 = 20
let size = ref(25)

setInterval(()=>{
	size.value++
	isShow = !isShow
	isActive.value = !isActive.value
},1000)

const arrs = ref(['../../static/booking1.png',
                  '../../static/booking2.png',
				  '../../static/booking3.png',
				  '../../static/booking4.png']);
let num = 0;			  
// const url1 = arrs.value[num]
const url1 = ref('../../static/booking1.png')

setInterval(()=>{
	if (num > 2) {
		num = -1;
	} 
	num++; 
	console.log(num)
	url1.value = arrs.value[num]
},1000)

</script>

<style lang="scss">
.box {
	width: 200px;
	height: 200px;
	background-color: red;
}
.active {
	background-color: green;
	font-size: 35px;
	color: darkred;
}
</style>